<template>
  <div>
    <header class="searchH">
      <router-link to="/home/home_index" class="iconfont icon-leftArr" ></router-link>
      <input type="text" placeholder="输入商家、商品名称">
      <span class="iconfont icon-search"></span>
      <p>搜索</p>
    </header>
    <!-- <router-view></router-view> -->
    <div class="hotSearch">
      <h2>热门搜索</h2>
      <ul>
        <router-link to = '/home/detail' v-for = "(hot, index) in hots"
          :key = "index" tag='li'>
          {{ hot.name }}
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      hots: [
        {
          id:'milktea',
          name:'奶茶'
        },
        {
          id:'fish',
          name:'酸菜鱼'
        },
        {
          id:'rice',
          name:'米饭'
        },
        {
          id:'baoziRice',
          name:'煲仔饭'
        },
        {
          id:'noodle',
          name:'面食'
        },
        {
          id:'hunburger',
          name:'汉堡'
        },
        {
          id:'porridge',
          name:'粥'
        }
      ]
    }
  }
}
</script>
<style lang="scss">
  body {
    height: auto;
  }
  input,button {
    outline: none;
    border: 0
  }
  .searchH {
    position: relative;
    margin: .1rem;
    display: flex;
    .icon-leftArr {
      font-size: .2rem;
      font-weight: bold;
    }
    input {
      width: 2.3rem;
      height: .28rem;
      margin-left: .3rem;
      margin-right: .2rem;
      padding-left: .3rem
    }
    span {
      position: absolute;
      top: .02rem;
      left: .6rem;
    }
    p {
      font-size: .16rem;
      font-weight: bold;
    }
  }
  .hotSearch {
    margin: .3rem .2rem;
    h2 {
      font-size: .16rem;
      font-weight: bold;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        padding: .04rem .06rem;
        margin-right: .1rem;
        margin-top: .1rem;
        background: white;
        border-radius: .03rem;
      }
    }
  }
</style>

